<section style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;">
  <div style="height: 1080px;">

    <!--头部-->
    <div class="top">
      <div class="top_left">详情</div>
      <div style="float:right;height: 100%;">
        <div class="top_nav" id="top_nav_one" style="visibility: hidden"></div>
        <div class="top_nav" id="top_nav_two" style="visibility: hidden"></div>
        <div class="top_less" style="visibility: hidden"></div>
        <div class="top_navright" id="what" (click)="showMot()" title="帮助"></div>
        <div class="top_less"></div>
        <div class="top_navright" id="top_nav_th" (click)="toSave()" title="保存"></div>
        <div class="top_less"></div>
        <div class="top_navright" id="top_nav_four" (click)="showConfirm()" title="关闭">
        </div>
      </div>
    </div>
    <!--头部结束-->

    <div class="big_background" id="big_background">

      <!--左侧开始-->
      <div class="left_big">
        <div style="float: left">
          <div id="pic" [ngClass]="{'active':showPic}" (click)="showActive1()">
            图片
          </div>
      <!--    <div id="font" [ngClass]="{'active':showPic1}" (click)="showActive()">
          文字
          </div>-->
        </div>
        <!--替换图临时区域按钮-->
        <div style="display: none;">
          <input type="file" id="replace-img-btn" (change)="toReplace($event)"  accept=".jpg,.png,.jpeg">
          <section id="flag" #flag>
          </section>
        </div>
        <div id="picc" *ngIf="showPic" title="选择图片上传">
          <div id="left_one">
            <input type="file" id="upload-img" (change)="select($event,'upload-img',1)"  accept=".jpg,.png,.jpeg" multiple>
            <img src="http://img.idaoying.com/3/DAILY_SHOW_COVER/20180625190229351aky?imageView2/2/w/500" alt="加载失败">
          </div>
          <div id="left_two">
            <input type="file" id="upload-img2" (change)="select($event,'upload-img2',2)"  accept=".jpg,.png,.jpeg" multiple>
            <img src="http://img.idaoying.com/3/DAILY_SHOW_COVER/20180625190337434fjV?imageView2/2/w/500" alt="">
          </div>
        </div>

        <div id="piccc" *ngIf="showPic1">
          <div class="left2_box">
            <input placeholder="请 输 入 标 题" readonly>
            <textarea name="" id="a" cols="30" rows="10"  placeholder="请输入内容请输入内容请输入内容请输入内容" readonly></textarea>
            <textarea name="" id="b" cols="30" rows="10"  placeholder="请输入内容请输入内容请输入内容请输入内容" readonly></textarea>
          </div>
          <div class="left2_box2">
            <input type="text" placeholder="请输入标题" readonly>
          </div>
          <div class="left2_box2">
            <textarea name="c" id="" cols="30" rows="10"  placeholder="请输入内容请输入内容请输入内容请" readonly></textarea>
          </div>
        </div>

      </div>
      <!--左侧结束-->

      <div  class="content">
        <div class="content_top">
          <div><span style="margin-left: 34px">宝贝</span></div>
          <div style="text-align: center;">评价</div>
          <div style="text-align: center;color: #1890ff">详情</div>
          <div style=""><span style="margin-right: 34px;float: right">推荐</span></div>
        </div>
        <!--内容-->
        <section id="content" #content>

        </section>
      </div>
    </div>
  </div>

</section>

<div id="mot" *ngIf="mot" (click)="showMot()"></div>
<div id="right_font" *ngIf="mot">
  <div class="right_box">
    <div id="right_btn" (click)="showMot()" title="收起">
      <img src="../../../assets/img/Path拷贝.png" alt="收起">
    </div>
    <h5>教程</h5>
    <div class="right_box1">
      <p style="margin-top: 18px;">尊敬的各位商友:</p>
      <p>为了更好的视觉体验，我们提供了商品详情图编辑器，以下为简要使用说明：</p>
    </div>
    <div class="right_box_less"></div>
    <div class="right_box_font">
      <p>原图模式上线，让你的图片更清晰!!!</p>
      <p>1、点击图片按钮，选择图片模式（1）无边框模式（2）有边框模式</p>
      <p>2、添加后的图片会依次显示在内容区域</p>
      <p>3、每张图片不超过2M</p>
    </div>
    <div class="left_mot_big">
      <img src="../../../assets/img/anli.png" alt="">
    </div>
    <div class="right_box_font">
      <p>原图编辑，更方便!!!</p>
      <p>点击内容区域图，将显示“上移”“下移”“替换”“删除”操作按钮</p>
      <p>再次点击图或其他区域按钮消失</p>
      <p>①操作区：基础内容编辑区，可以对其中的照片进行上下移动、替换、浏览等</p>
      <p>②本模块管理：上下移动，替换当前图片，删除模块</p>
    </div>
    <div class="left_mot_big">
      <img src="../../../assets/img/edit_btns.png" alt="">
    </div>
    <div class="right_box_font">
      <p>导航菜单，简单明了!!!</p>
      <p>顶部导航菜单，有“帮助”“保存”“取消”操作按钮</p>
      <p>①本编辑器帮助按钮，可查看编辑器教程</p>
      <p>②保存：将保存您当前修改的内容并关闭窗口</p>
      <p>③关闭：关闭当前页面，将不会保存您当前修改的内容</p>
    </div>
    <div class="left_mot_big" style="margin-bottom: 150px;">
      <img src="../../../assets/img/data_btns.jpg" alt="">
    </div>
  </div>
</div>
